<template>
    <div>
        <!-- 搜索卡片 -->
        <el-card>
            <el-form :model="queryForm" :inline='true' >
                <el-form-item label="IP地址">
                    <el-input type="text" v-model="queryForm.ipAddress" placeholder="请输入IP地址" size="small"></el-input>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input type="text" v-model="queryForm.username" placeholder="请输入用户名" size="small"></el-input>
                </el-form-item>
                <el-form-item label="功能模块">
                    <el-select v-model="queryForm.block" size="small">
                        <el-option value="缴电费" label="缴电费"></el-option>
                        <el-option value="缴水费" label="缴水费"></el-option>
                        <el-option value="余额充值" label="余额充值"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" @click="handleSearch">搜索</el-button>
                    <el-button size="small" @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="mt12" style="margin-top: 10px;">
            <div class="handel-btns">
                <div class="left-btns">
                    <el-button size="small" icon="el-icon-delete" @click="handleBatchDelete()" type="danger" plain>批量删除</el-button>
                </div>
            </div>
            <!-- 数据表格 -->
            <el-table :data="logList" 
                v-loading="loading"
                class="mt12" 
                style="wdith:100%;margin: 10px 0"
                :header-cell-style="{background:'#f8f8f9',color:'#5a516e'}"
                :cell-style="{padding:'10px 0px'}"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50" align="center"></el-table-column>
                <el-table-column align="center" label="ID" width="120" prop="id">
                    <template slot-scope="scope">
                        {{ scope.row.id }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="用户名" width="120" prop="username">
                    <template slot-scope="scope">
                        {{ scope.row.username }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="IP地址" prop="ipAddress">
                    <template slot-scope="scope">
                        {{ scope.row.ipAddress }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="IP归属" prop="address">
                    <template slot-scope="scope">
                        {{ scope.row.address }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="浏览器" prop="browser">
                    <template slot-scope="scope">
                        {{ scope.row.browser }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作系统" prop="platform">
                    <template slot-scope="scope">
                        {{ scope.row.platform }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="缴费类型" prop="block">
                    <template slot-scope="scope">
                        <el-tag type="warning" v-if="scope.row.block == '缴电费'"> {{ scope.row.block }} </el-tag>
                        <el-tag type="primary" v-if="scope.row.block == '缴水费'"> {{ scope.row.block }} </el-tag>
                        <el-tag type="success" v-if="scope.row.block == '余额充值'"> {{ scope.row.block }} </el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="缴费信息" prop="info">
                    <template slot-scope="scope">
                        {{ scope.row.info }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="支出金额" prop="info">
                    <template slot-scope="scope">
                        ￥{{ scope.row.money }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作时间" prop="logTime">
                    <template slot-scope="scope">
                        {{ scope.row.logTime }}
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
            :current-page="queryForm.pageNo" 
            :page-size="queryForm.pageSize"
            :total="total"
            :page-sizes="[10,20,50,100]"
            layout="total,sizes,prev,pager,next"
            @current-change='handleCurrentChange'
            @size-change='handleSizeChange'>
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
    import { selectAll,delLog } from '@/api/deallog'
    export default {
        name:'DealLog',
        data(){
            return{
                loading: true,
                total:120,
                queryForm:{
                    pageNum:1,
                    pageSize:10
                },
                selectList:[],
                logList:[],

            }
        },
        created(){
            this.getList()
        },
        methods:{
            //重置
            handleReset(){
                this.queryForm = {
                    pageNum:1,
                    pageSize:10
                }
                this.getList()
            },
            //搜索
            handleSearch(){
                this.queryForm.pageNum = 1
                this.getList()
            },
            //更改每页大小
            handleSizeChange(pageSize){
                this.queryForm.pageSize = pageSize
                this.queryForm.pageNum = 1
                this.getList()
            },
            //更改当前页码
            handleCurrentChange(pageNum){
                this.queryForm.pageNum = pageNum
                this.getList()
            },
            //获取数据列表
            getList(){
                this.loading = true
                selectAll(this.queryForm).then(res=>{
                    this.logList = res.data.records
                    this.total = res.data.total
                    this.loading = false
                }).catch(err=>{})
            },
            //删除
            handleDelete(id){
                this.$confirm("你确定删除id为"+id+"的记录吗？","提示",{
                    cancelButtonText:"取消",
                    confirmButtonText:"确定",
                    type:"warning"
                }).then(()=>{
                    //调接口删除
                    delLog(id).then(res => {
                        //提示删除成功
                        this.$message("删除成功")
                        //刷新列表
                        this.getList()
                    }).catch(err=>{
                        console.log(err)
                    })
                }).catch(()=>{})
            },
            //批量删除
            handleBatchDelete(){
                if(this.selectList){
                    let ids = this.selectList.map(o => {return o.id})
                    console.log('ids---------->',ids)
                    this.handleDelete(ids)
                }
            },
            //当我们选择时会回调这个函数
            handleSelectionChange(val){
                this.selectList = val;
                console.log(val)
            }
        }
    }
</script>